<template>
  <div class="p-[5px] flex-1 page_contain" v-loading="pageLoading">
    <el-page-header
      @back="goBack"
      class="mt-[8px] ml-[10px] text-[12px] mb-[6px] page_header"
    >
      <template #content>
        <span class="text-[12px] font-400 mr-3 c-blueGray">
          {{ collectDetail?.machineName || "" }}
          <!-- {{
              route.query.paramType === "2"
                ? "采集监控详情（加工参数）"
                : "采集监控详情（过程参数）"
            }} -->
          采集监控详情
        </span>
      </template>
    </el-page-header>
    <div class="page_content">
      <el-row :gutter="0" v-if="collectDetail" class="page_content_row">
        <el-col :span="cardSpan">
          <div
            class="bg-#fff m-[5px] !pb-[10px] of-hidden rounded-[8px] produceCard produceCard_left"
          >
            <div>
              <!-- <p class="produce-c-title">
                  <svg-icon icon-class="title" />设备基本信息
                </p> -->
              <div class="detail_line pl-[15px] mt-4">
                <div class="detail">
                  <span>工序：</span>
                  <span>{{ collectDetail?.processCode || "" }}</span>
                </div>
                <div class="detail">
                  <span>设备：</span>
                  <span>{{ collectDetail?.machineName || "" }}</span>
                </div>
                <div class="detail" v-show="collectDetail?.projectName">
                  <span>项目：</span>
                  <span>{{ collectDetail?.projectName || "" }}</span>
                </div>
                <!-- <div class="detail">
                    <span>设备编号：</span>
                    <span>{{ collectDetail?.machineCode || "" }}</span>
                  </div> -->
                <div class="detail" v-show="collectDetail?.productCode">
                  <span>产品型号：</span>
                  <span>{{ collectDetail?.productCode || "" }}</span>
                </div>

                <div class="detail" v-show="collectDetail?.programName">
                  <span>程序名：</span>
                  <span>{{ collectDetail?.programName || "" }}</span>
                </div>
                <!-- <div class="detail" v-show="collectDetail?.locationName">
                      <span>位置：</span>
                      <span>{{ collectDetail?.locationName || "" }}</span>
                    </div> -->
                <div class="detail">
                  <span>设备状态：</span>
                  <span v-if="collectDetail?.deviceStatus == '3'">
                    <span
                      class="bg-red w-[13px] h-[13px] rounded-[13px] mt-[7px] mr-[5px]!"
                    ></span
                    >{{ collectDetail?.deviceStatusName || "" }}</span
                  >
                  <span v-if="collectDetail?.deviceStatus == '2'">
                    <span
                      class="bg-gray w-[13px] h-[13px] rounded-[13px] mt-[7px] mr-[5px]!"
                    ></span
                    >{{ collectDetail?.deviceStatusName || "" }}</span
                  >
                  <span v-if="collectDetail?.deviceStatus == '1'">
                    <span
                      class="bg-[#81B337] w-[13px] h-[13px] rounded-[13px] mt-[7px] mr-[5px]!"
                    ></span>
                    <!-- {{
                        useDictionary(
                          "ProduceDeviceStatus",
                          collectDetail?.deviceStatus || ""
                        )
                      }} -->
                    {{ collectDetail?.deviceStatusName || "" }}
                  </span>
                  <span v-else>
                    {{ collectDetail?.deviceStatusName || "" }}</span
                  >
                </div>

                <!-- <div class="detail">
                    <span>工艺过程状态：</span>
                    <span v-if="collectDetail?.paramStatus == '3'">
                      <span
                        class="bg-red w-[13px] h-[13px] rounded-[13px] mt-[7px] mr-[5px]!"
                      ></span
                      >{{ collectDetail?.paramStatusName || "" }}</span
                    >
                    <span v-if="collectDetail?.paramStatus == '2'">
                      <span
                        class="bg-orange w-[13px] h-[13px] rounded-[13px] mt-[7px] mr-[5px]!"
                      ></span
                      >{{ collectDetail?.paramStatusName || "" }}</span
                    >
                    <span v-if="collectDetail?.paramStatus == '1'">
                      <span
                        class="bg-[#81B337] w-[13px] h-[13px] rounded-[13px] mt-[7px] mr-[5px]!"
                      ></span
                      >{{ collectDetail?.paramStatusName || "" }}</span
                    >
                    <span v-else>
                      {{ collectDetail?.paramStatusName || "" }}</span
                    >
                  </div> -->
              </div>
            </div>
            <div>
              <!-- <p class="produce-c-title mt-[25px]!">
                  <svg-icon icon-class="title" />监控数据
                  <span class="text-[12px] font-400 c-blueGray">
                    （参数类型为整型、浮点和布尔可展示曲线图）
                  </span>
                </p> -->
              <!-- <el-divider content-position="left" /> -->
              <el-form
                :model="searchParam"
                :inline="true"
                class="pl-[15px] mt-[20px]"
              >
                <el-form-item label="参数类型">
                  <el-select
                    v-model="searchParam.processDataType"
                    placeholder="请选择"
                    clearable
                    filterable
                    @change="processTypeChange"
                    style="width: 130px"
                  >
                    <el-option label="工艺加工参数" value="2" />
                    <el-option label="工艺过程参数" value="3" />
                  </el-select>
                </el-form-item>

                <el-form-item label="工艺参数">
                  <el-select
                    v-model="searchParam.parameterName"
                    placeholder="请选择"
                    clearable
                    filterable
                    @change="processParameterChange"
                    style="width: 140px"
                  >
                    <el-option
                      v-for="(item, index) in collectParamList"
                      :key="index"
                      :label="item.parameterDesc"
                      :value="item.parameterName"
                    />
                  </el-select>
                </el-form-item>
                <el-form-item label="显示近">
                  <el-input
                    v-model="searchParam.pointCount"
                    placeholder="请输入"
                    clearable
                    @keyup.enter="getSingleData"
                    style="width: 96px"
                  >
                    <template #append>点</template>
                  </el-input>
                </el-form-item>
                <el-form-item class="button_line">
                  <el-button type="primary" @click="getSingleData">
                    搜索
                  </el-button>
                  <el-button @click="handleReset"> 重置 </el-button>
                </el-form-item></el-form
              >

              <div class="check_content mx-[20px]">
                <div v-if="!singleLoading && !singleData">
                  <el-empty description="暂无数据" />
                </div>
                <div v-if="singleData">
                  <psmParamLineChart
                    key="1"
                    id="1"
                    :showName="true"
                    :seriesData="singleData"
                  />
                </div>
                <!-- 最大值、最小值、平均值、取样频率 -->
                <div
                  v-if="singleData"
                  class="detail_line pl-[15px] mt-4 flex justify-center"
                  style="font-weight: 600"
                >
                  <div class="detail">
                    <span>最大值：</span>
                    <span>{{ singleData?.parameterMaxValue ?? "--" }}</span>
                  </div>
                  <div class="detail">
                    <span>最小值：</span>
                    <span>{{ singleData?.parameterMinValue ?? "--" }}</span>
                  </div>
                  <div class="detail">
                    <span>平均值：</span>
                    <span>{{ singleData?.parameterAvgValue ?? "--" }}</span>
                  </div>
                  <div class="detail">
                    <span>取样频率：</span>
                    <span>{{ singleData?.parameterSampleRate ?? "--" }}</span>
                  </div>
                </div>
              </div>
            </div>

            <div class="line_chart_div"></div>
          </div>
        </el-col>
        <el-col :span="cardSpan1">
          <div class="bg-[#fff] m-[5px] of-scroll rounded-[8px] produceCard">
            <!-- <div class="p-2" v-if="untreatedList && untreatedList.length">
                <div class="alert_info">
                  <p class="alert_title">工单列表</p>
                  <div class="alert_content_box">
                    <p
                      v-for="(item, index) in untreatedList"
                      :key="index"
                      class="alert_content"
                      @click="openWorkOrder(item)"
                    >
                      {{ index + 1 }}. {{ item?.collectionTime || "" }}&nbsp;
                      {{ item?.productModel || "" }}&nbsp;
                      {{ item?.parameterDesc || "" }}&nbsp;
                      {{ item?.parameterValue || "" }}&nbsp;
                      {{ item?.monitoringResult || "" }}
                    </p>
                  </div>
                </div>
              </div> -->
            <div
              class="flex mt-[16px] px-[10px]"
              style="flex-direction: column"
            >
              <PsmParamMonitorOther
                v-if="route.query.equipCode"
                ref="PsmParamRef3"
                type="3"
                :equipCode="route.query.equipCode"
                :key="3"
                alarmTime=""
                :recordCount="3"
                style="margin-bottom: 14px"
              />
              <PsmParamMonitorOther
                v-if="route.query.equipCode"
                ref="PsmParamRef1"
                type="1"
                :equipCode="route.query.equipCode"
                :key="1"
                alarmTime=""
                :recordCount="2"
                style="margin-bottom: 14px"
              />
              <PsmParamMonitorOther
                v-if="route.query.equipCode"
                ref="PsmParamRef2"
                type="2"
                :equipCode="route.query.equipCode"
                :key="2"
                alarmTime=""
                :recordCount="2"
                style="margin-bottom: 14px"
              />
              <PsmParamMonitorOther
                v-if="route.query.equipCode"
                ref="PsmParamRef4"
                type="4"
                :equipCode="route.query.equipCode"
                :key="4"
                alarmTime=""
                :recordCount="3"
                style="margin-bottom: 14px"
              />
              <PsmParamMonitorOther
                v-if="route.query.equipCode"
                ref="PsmParamRef5"
                type="5"
                :equipCode="route.query.equipCode"
                :key="5"
                alarmTime=""
                :recordCount="1"
              />
              <!-- <el-button
                  plain
                  type="primary"
                  class="flex-1 mx-0! my-[5px] edit-btn"
                  @click="openOthers('1')"
                  >工装更换</el-button
                >
                <el-button
                  plain
                  type="primary"
                  class="flex-1 mx-0! my-[5px] edit-btn"
                  @click="openOthers('2')"
                  >耗材更换</el-button
                >
                <el-button
                  plain
                  type="primary"
                  class="flex-1 mx-0! my-[5px] edit-btn"
                  @click="openOthers('3')"
                  >设备报警</el-button
                >
                <el-button
                  plain
                  type="primary"
                  class="flex-1 mx-0! my-[5px] edit-btn"
                  @click="openOthers('4')"
                  >工单记录</el-button
                >
                <el-button
                  plain
                  type="primary"
                  class="flex-1 mx-0! my-[5px] edit-btn"
                  @click="openOthers('5')"
                  >检验记录</el-button
                > -->
            </div>
            <!-- <div
                class="pb-[5px] overflow-hidden flex flex-wrap items-center w-full"
              ></div> -->
          </div>
        </el-col>
      </el-row>
    </div>
    <!-- 工单弹窗 -->
    <psmworkorder-edit
      :visible="addDialog.visible"
      :title="addDialog.title"
      :data="addDialog.data"
      :is-readonly="addDialog.readvisible"
      @change-visible="changeVisible"
      key="1"
    />
    <!-- <PsmParamMonitorOthers
        ref="PsmParamRef"
        :type="otherType"
        :equipCode="route.query.equipCode"
        recordCount=""
        alarmTime=""
      /> -->
  </div>
</template>

<!-- 手动挂载左侧菜单高亮 -->
<script lang="ts">
import { defineComponent } from "vue";

export default defineComponent({
  // 页面进入路由处理
  beforeRouteEnter(to: any, from: any, next: any) {
    to.meta.defaultActive = "/psm/psmParamMonitoring";
    next();
  },
  // 页面离开路由处理（暂不开发）
  // beforeRouteLeave(to, from, next) {
  //   console.log("from", to);
  //   useTagsViewStore()
  //     .delView(from)
  //     .then((res: any) => {
  //       next();
  //     });
  // },
});
</script>

<script lang="ts" setup>
import request from "@/utils/request";
import noDevice from "@/assets/images/no-device.png";
import dayjs from "dayjs";
import { useRoute, useRouter } from "vue-router";
import { deepClone } from "@/utils/commonHooks";
import { useTagsViewStore } from "@/store/modules/tagsView";
import { mockDetail } from "@/views/psm/psmParamMonitoring/index";
import { useDictionary } from "@/utils/useTable";
import psmworkorderEdit from "@/views/pcm/psmworkorder/components/psmworkorder-edit.vue";
import psmParamLineChart from "@/views/psm/psmParamQuery/components/psmParamLineChart.vue";
import { getSingleDataMock } from "@/views/pcm/pcmMonitoring/index";
import PsmParamMonitorOther from "@/views/psm/common/psmParamMonitorOther.vue";
// import PsmParamMonitorOthers from "@/views/psm/common/PsmParamMonitorOthers.vue";

const tagsViewStore = useTagsViewStore();
const route: any = useRoute();
const router = useRouter();

defineOptions({
  name: "PSMPSMPARAMMONITORINGLISTNEW",
  inheritAttrs: false,
});

const props = defineProps({
  equipCode: {
    //设备编号
    type: String,
    default: () => {
      return "";
    },
  },
  equipId: {
    //设备ID
    type: String,
    default: () => {
      return "";
    },
  },
  paramType: {
    // 参数类型  2:工艺加工参数 3：工艺过程参数
    type: String,
    default: () => {
      return "2";
    },
  },
});
const { equipCode, paramType, equipId } = toRefs(props);

// 图片地址
const actionUrl = import.meta.env.VITE_APP_BASE_API;

// 定义自适应布局
const cardSpan = ref(changeSpan(window.innerWidth));
const cardSpan1 = ref(changeSpan1(window.innerWidth));

onUnmounted(() => {
  // 清理事件监听器
  window.removeEventListener("resize", checkScreenSize);
});

const checkScreenSize = () => {
  cardSpan.value = changeSpan(window.innerWidth);
  cardSpan1.value = changeSpan1(window.innerWidth);
};

// 共60份  60/2
function changeSpan(innerWidth: number) {
  if (innerWidth < 768) {
    return 24;
  } else if (innerWidth >= 768 && innerWidth < 992) {
    return 24;
  } else if (innerWidth >= 992 && innerWidth < 1300) {
    return 24;
  } else if (innerWidth >= 1300 && innerWidth < 1500) {
    return 14;
  } else if (innerWidth >= 1500 && innerWidth < 1920) {
    return 15;
  } else if (innerWidth >= 1920) {
    return 16;
  }
}
function changeSpan1(innerWidth: number) {
  if (innerWidth < 768) {
    return 24;
  } else if (innerWidth >= 768 && innerWidth < 992) {
    return 24;
  } else if (innerWidth >= 992 && innerWidth < 1300) {
    return 24;
  } else if (innerWidth >= 1300 && innerWidth < 1500) {
    return 10;
  } else if (innerWidth >= 1500 && innerWidth < 1920) {
    return 9;
  } else if (innerWidth >= 1920) {
    return 8;
  }
}

// 获取采集参数下拉框
const pageLoading = ref(false);
const collectDetail: any = ref();
const getCollectList = async () => {
  pageLoading.value = true;
  const res: any = await request({
    url: `/dmpDosPcm/processParamMonitor/getMachineInfo/${
      equipCode.value || route.query.equipCode
    }/${paramType.value || route.query.paramType}`,
    method: "get",
  }).catch(() => {
    pageLoading.value = false;
  });
  if (res.code === 200 && res.data) {
    collectDetail.value = res.data;
    searchParam.processCode = collectDetail.value.processCode;
    searchParam.processId = collectDetail.value.processId;
    searchParam.productModel = collectDetail.value.productCode;
    setTimeout(() => {
      openOther();
    }, 200);
  }
  pageLoading.value = false;
};

const untreatedList = ref();
const getUntreatedList = async () => {
  const res: any = await request({
    url: `/dmpDosPcm/psmworkorder/getUntreatedList/${
      equipCode.value || route.query.equipCode
    }/${paramType.value || route.query.paramType}`,
    method: "get",
  }).catch(() => {});
  if (res.code === 200 && res.data) {
    untreatedList.value = res.data || [];
    // untreatedList.value = [
    //   {
    //     id: "1899669704168013826",
    //     collectionTime: "2025-02-05 10:30:30",
    //     productModel: "753428",
    //     parameterDesc: "转速阶段2",
    //     parameterValue: "600",
    //     monitoringResult: "超过控制范围",
    //   },
    //   {
    //     collectionTime: "2025-02-05 10:30:30",
    //     productModel: "753428",
    //     parameterDesc: "转速阶段2",
    //     parameterValue: "600",
    //     monitoringResult: "超过控制范围",
    //   },
    // ];
  }
};

// 参数类型变更
function processTypeChange(id: string) {
  searchParam.parameterDesc = "";
  searchParam.parameterName = "";

  collectParamList.value = [];
  if (id) {
    getCollectParamList();
  } else {
    getCollectParamList();
  }
}

// 获取参数列表
const collectParamList = ref(<any>[]);
async function getCollectParamList(id?: string) {
  const res: any = await request({
    url: "/iotadmin/scaequipcollectionparam/getProcessParamList",
    method: "post",
    data: {
      paramType: searchParam.processDataType,
      relationId: searchParam.deviceId,
    },
  });
  if (res.code === 200) {
    collectParamList.value = res.data || [];
  }
}

// 参数列表变更
function processParameterChange(name: string) {
  if (name) {
    const current: any =
      collectParamList.value?.filter((e: any) => e.parameterName === name)[0] ??
      {};
    searchParam.parameterDesc = current.parameterDesc || "";
  } else {
    searchParam.parameterDesc = "";
  }
}

function handleReset() {
  searchParam.processDataType = "";
  searchParam.parameterName = "";
  searchParam.parameterDesc = "";
  searchParam.pointCount = "50";
  singleData.value = null;
  collectParamList.value = [];
}

// 获取单值图数据
const singleLoading = ref(false);
const singleData = ref<any>(null);
const searchParam = reactive({
  processCode: "",
  processId: "",
  productModel: "",
  deviceId: equipId.value || route.query.equipId,
  //   deviceCode: equipCode.value || route.query.equipCode,
  processDataType: "",
  parameterName: "",
  parameterDesc: "",
  pointCount: "50",
});

// 搜索前校验
function validHandle() {
  if (!searchParam.processDataType) {
    ElMessage.error("请选择参数类型");
    return false;
  } else if (!searchParam.parameterName) {
    ElMessage.error("请选择工艺参数");
    return false;
  } else if (!searchParam.pointCount) {
    ElMessage.error("请输入节点数量");
    return false;
  } else if (!validateNumberCanNot1(searchParam.pointCount)) {
    return false;
  } else if (Number(searchParam.pointCount) > 3000) {
    ElMessage.error("节点数量不能大于3000");
    return false;
  } else {
    return true;
  }
}

// 可以不填写，但如果填写的话，必须是整数数字
function validateNumberCanNot1(value: any) {
  const value1 = value.toString();
  if (isNaN(parseFloat(value1)) && isFinite(value1)) {
    ElMessage.error("请输入正确的节点数量");
    return false;
  } else if (!/^[+-]?\d*(\.\d*)?(e[+-]?\d+)?$/.test(value1)) {
    ElMessage.error("请输入正确的节点数量");
    return false;
  } else if (value1.indexOf(".") !== -1) {
    ElMessage.error("节点数量不能为小数");
    return false;
  } else if (Number(value1) == 0) {
    ElMessage.error("节点数量不能等于0");
    return false;
  } else if (Number(value1) <= 0) {
    ElMessage.error("节点数量不能小于0");
    return false;
  } else {
    return true;
  }
}

async function getSingleData() {
  if (!validHandle()) {
    return;
  }
  singleData.value = null;
  singleLoading.value = true;
  const data: any = await request({
    url: "/dmpDosPcm/psmprocessdata/curve",
    method: "post",
    data: toRaw(searchParam),
  })
    .finally(() => {
      singleLoading.value = false;
    })
    .catch((e) => {});
  if (data) {
    singleData.value = {
      ...data.data,
      paramName: searchParam.parameterDesc,
    };
  }

  // 模拟
  //   singleData.value = {};
  //   singleLoading.value = true;
  //   setTimeout(() => {
  //     singleData.value = getSingleDataMock(100);
  //     console.log("singleData.value", singleData.value);
  //     singleLoading.value = false;
  //   }, 1000);
}

// 打开工单详情
function openWorkOrder(item: any) {
  if (item.id) {
    openDialogdetail({ id: item.id });
  }
}

const addDialog = reactive<DialogOption>({
  visible: false,
  readvisible: false,
  title: "",
  data: {},
});

// 查询详情
async function getInfo(id: string) {
  request({
    url: `/dmpDosPcm/psmworkorder/get/${id}`,
    method: "get",
  })
    .then((data) => {
      addDialog.data = data.data;
      addDialog.visible = true;
    })
    .catch((res) => {
      console.log(res);
    });
}
/** 打开工单管理表单弹窗 详情 */
function openDialogdetail(roleObj?: any) {
  addDialog.title = "工单管理详情";
  getInfo(roleObj.id);
  addDialog.readvisible = true;
}

function changeVisible(value: boolean) {
  addDialog.visible = value;
  if (!value) {
    addDialog.data = {};
  }
}

// 返回
const goBack = () => {
  tagsViewStore.delView(route).then((res: any) => {
    router.replace({
      name: "PSMPSMPARAMMONITORING",
    });
  });
};

// 图片折叠
const activeImages = ref(["1"]);

// 当前页面被激活时触发
onActivated(async () => {
  window.scrollTo(0, 0);
});

const PsmParamRef1 = ref();
const PsmParamRef2 = ref();
const PsmParamRef3 = ref();
const PsmParamRef4 = ref();
const PsmParamRef5 = ref();
function openOther() {
  PsmParamRef1.value?.openColSetting();
  PsmParamRef2.value?.openColSetting();
  PsmParamRef3.value?.openColSetting();
  PsmParamRef4.value?.openColSetting();
  PsmParamRef5.value?.openColSetting();
}

onMounted(() => {
  if (equipCode.value || route.query.equipCode) {
    // 获取设备及采集详情
    getCollectList();
    // 获取预警信息
    getUntreatedList();
  } else {
    ElMessage.error("设备编号不能为空");
  }
  // 在组件挂载后检查屏幕大小
  // 添加事件监听，以便在屏幕大小变化时更新条件
  window.addEventListener("resize", checkScreenSize);
});

onBeforeUnmount(() => {});

// const otherType = ref("1");
// const PsmParamRef = ref();
// function openOthers(type: string) {
//   otherType.value = type;
//   PsmParamRef.value.openColSetting();
// }
</script>

<style lang="scss" scoped>
@media only screen and (max-width: 768px) {
  .el-col-xs-24 {
    padding-right: 10px !important;
  }
}

.produce-c-title {
  font-weight: 600;
  margin: 20px 0 12px 30px;
  font-size: 16px;
  position: RELATIVE;
  padding-left: 15px;
  svg {
    width: 1em;
    height: 1em;
    font-size: 24px;
    transform: rotateZ(-268deg);
    position: absolute;
    left: -11px;
    top: -1px;
  }
}

.numberFont {
  font-family: "DINLight";
  color: #f56c6c;
}
.numberLight {
  font-family: "DINLight";
  font-size: 12px;
  font-weight: 600;
}
.DINLight {
  font-family: "DINLight";
}

// 最新样式
.produceCard {
  height: calc(100vh - 160px);
  overflow-y: auto;
  :deep(.el-collapse) {
    border-top: none;
    .el-collapse-item__header {
      padding: 0 10px;
    }
    .el-collapse-item__content {
      padding-bottom: 15px;
    }
  }
  .check_content {
    :deep(.el-collapse .el-collapse-item__header) {
      height: 38px;
    }
  }
}
:deep(.el-page-header__header) {
  .el-page-header__icon .el-icon {
    color: rgba(148, 163, 184, 1);
    font-size: 14px;
  }
  .el-page-header__back {
    color: rgba(148, 163, 184, 1);
  }
}
.detail_line {
  overflow: hidden;
  .detail {
    font-size: 14px;
    overflow: hidden;
    float: left;
    margin-right: 35px;
    line-height: 28px;
    color: #4e5969;
    span {
      display: block;
      float: left;
      word-break: break-all;
    }
    span:nth-child(1) {
      margin-right: 0px;
    }
  }
}
:deep(.el-alert .el-alert__description) {
  margin: 3px 0 0 0;
  font-size: 13px;
}
:deep(.el-alert .el-alert__title) {
  font-size: 14px;
}

.alert_info {
  background-color: var(--el-color-warning-light-9);
  color: var(--el-color-warning);
  padding: 8px 0 8px 16px;
  border-radius: 4px;
  .alert_title {
    margin: 8px 0 10px;
    font-size: 14px;
    font-weight: 700;
    line-height: 20px;
    vertical-align: top;
  }
  .alert_content {
    margin: 7px 10px 0 0;
    font-size: 13px;
    line-height: 20px;
    cursor: pointer;
    color: #4e5969;
  }
  .alert_content:hover {
    text-decoration: underline;
  }
}
.alert_content_box {
  max-height: calc(100vh - 120px - 120px - 60px);
  overflow-y: auto;
}
:deep(.el-form--inline .el-form-item) {
  margin-right: 16px;
  .el-input-group__append {
    padding: 0 8px;
  }
  .el-form-item__label {
    padding-right: 10px;
  }
}
:deep(.el-form--inline .button_line) {
  margin-right: 0px !important;
  .el-button:nth-child(2) {
    margin-left: 5px;
  }
}

.edit-btn .el-button {
  height: 40px;
}
</style>
